<template>
	<div class="view-details-quality-container">
		<el-dialog :title="viewTitle" :visible.sync="dialogVisible" width="697px" :before-close="handleClose" custom-class="view-quality-dialog">
			<div class="monomial-score">
				<span>单项满分：{{ viewDetailsData.singleFullMarks }}</span>
				<span class="marginLeft">单项得分：{{ viewDetailsData.individualScore }}</span>
				<!-- <p> -->
				<span class="marginLeft">状态：</span>
				<span class="success-text" v-if="viewDetailsData.status">通过</span>
				<span class="error-text" v-else>不通过</span>
				<span class="passing-conditions">（通过最低分值：{{ viewDetailsData.thresholdPoint }}）</span>
				<!-- </p> -->
			</div>
			<div class="detection-time">
				<span>检测开始时间： {{ viewDetailsData.startTime }}</span>
				<span class="padding28">检测结束时间： {{ viewDetailsData.endTime }}</span>
				<span>检测时间间隔：{{ viewDetailsData.timeInterval }}ms</span>
			</div>
			<p class="record-title">未通过检测记录：</p>
			<el-table :data="viewDetailsData.tableData" style="width: 100%" border empty-text="无未通过记录" :cell-style="columnbackgroundStyle">
				<el-table-column prop="detectionTime" label="检测时间" width="180" align="center"> </el-table-column>
				<el-table-column prop="detectionValue" label="检测值" width="180" align="center"> </el-table-column>
				<el-table-column prop="threshold" label="阈值" align="center"> </el-table-column>
				<el-table-column prop="deductPoints" label="扣分" align="center"> </el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: '',
	components: {},
	props: {
		dialogVisible: {
			require: true,
			type: Boolean,
			default: () => false
		},
		viewTitle: {
			require: true,
			type: String,
			default: () => ''
		},

		viewDetailsData: {
			require: true,
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {};
	},
	mounted() {
		console.log(this.viewDetailsData, 'viewDetailsData:');
		console.log('viewTitle', this.viewTitle);
	},
	methods: {
		handleClose() {
			this.$emit('handleClose');
		},
		// 设置检测值为红色
		columnbackgroundStyle({ columnIndex }) {
			// console.log(columnIndex);
			if (columnIndex === 1) {
				return 'color:#ef5753';
			}
		}
	}
};
</script>

<style lang="less" scoped>
.view-details-quality-container {
	.view-quality-dialog {
		.monomial-score {
			display: flex;
			span {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.success-text {
				color: #21db63;
			}
			.error-text {
				color: #ef5753;
			}
			.marginLeft {
				margin-left: 28px;
				display: inline-block;
			}
			.passing-conditions {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #b8b8b8;
				margin-left: 8px;
			}
		}
		.detection-time {
			margin-top: 15px;
			display: flex;
			span {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.padding28 {
				padding: 0 28px;
			}
		}
		.record-title {
			margin-top: 27px;
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			padding-bottom: 11px;
		}
	}
	/deep/ .el-table thead {
		color: #676a6c;
		tr {
			th {
				background-color: #f8f8f9;
			}
		}
	}
	.redColor {
		color: #ef5753;
	}
	// /deep/ .el-dialog__body {
	// 	margin-top: -10px;
	// }
}
</style>
